<script setup lang="ts">
import { reactive, ref, onMounted,defineExpose,defineProps,defineEmits } from "vue";
//菜单

const props = defineProps({

})
let treeRef = ref(null)
let checKay = ref([])
let checName = ref([])
let dialogTree = ref(false)
let loading = ref(false)
let treeData = ref([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])
const defaultProps = {
  children: 'children',
  label: 'label',
}
const confirmBtn = () =>{
  dialogTree.value = false
  treeData.value = []
  checKay.value = []
  checName.value = []
}
const getCurrentNodes = (data,checked) =>{
  console.log(data,checked)
  if(checked.checkedNodes.length>0){
    checKay.value = []
    checName.value = []
    checked.checkedNodes.forEach(node =>{
      checName.value.push(node.label)
      checKay.value.push(node.id)
    })
  }else{
    checKay.value = []
    checName.value = []
  }
  console.log(checKay.value)
  console.log(checName.value)

}
const emit = defineEmits(["cropper"]);
const btnHandle = () =>{
  emit("cropper", { 'checKay':checKay.value, 'checName':checName.value });
  dialogTree.value = false
}
defineExpose({ 
dialogTree,
checKay,
checName,
treeRef
 });
</script>

<template>
  <div class="treeInfo">
    <el-dialog title="" v-model="dialogTree" width="400px" style="min-height:400px;">
      <div v-show="!loading" >
        <el-tree ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
        :show-checkbox="true" highlight-current @check="getCurrentNodes" 
        :default-checked-key="checKay"
        ></el-tree>
      </div>
      <template #footer>
        <el-button type="primary" @click="btnHandle">确认</el-button>
        <el-button @click="confirmBtn">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
